<template>
    <div class="data-analysis-container">
      <el-card>
        <div slot="header" class="clearfix">
          <span>数据分析</span>
          <!-- <el-button
            style="float: right; padding: 3px 0"
            type="text"
            @click="handleRefresh"
          >刷新</el-button> -->
        </div>
        
        <!-- 统计卡片区域 -->
        <el-row :gutter="20" class="stat-cards">
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-card-header">
                <i class="el-icon-user stat-icon user-icon"></i>
                <div class="stat-title">用户总数</div>
              </div>
              <div class="stat-value">{{ statistics.userCount || 0 }}</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-card-header">
                <i class="el-icon-picture stat-icon exhibition-icon"></i>
                <div class="stat-title">展览总数</div>
              </div>
              <div class="stat-value">{{ statistics.exhibitionCount || 0 }}</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-card-header">
                <i class="el-icon-document stat-icon reservation-icon"></i>
                <div class="stat-title">预约总数</div>
              </div>
              <div class="stat-value">{{ statistics.reservationCount || 0 }}</div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card shadow="hover" class="stat-card">
              <div class="stat-card-header">
                <i class="el-icon-s-custom stat-icon guide-icon"></i>
                <div class="stat-title">解说员总数</div>
              </div>
              <div class="stat-value">{{ statistics.guideCount || 0 }}</div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 图表区域 -->
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <el-card shadow="hover" class="chart-card">
              <div slot="header" class="clearfix">
                <span>预约类型分布</span>
              </div>
              <div id="reservationTypeChart" class="chart"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="chart-card">
              <div slot="header" class="clearfix">
                <span>预约状态分布</span>
              </div>
              <div id="reservationStatusChart" class="chart"></div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" class="chart-row">
          <el-col :span="24">
            <el-card shadow="hover" class="chart-card">
              <div slot="header" class="clearfix">
                <span>近30天预约趋势</span>
              </div>
              <div id="reservationTrendChart" class="chart"></div>
            </el-card>
          </el-col>
        </el-row>
        
        <el-row :gutter="20" class="chart-row">
          <el-col :span="12">
            <el-card shadow="hover" class="chart-card">
              <div slot="header" class="clearfix">
                <span>热门展览排行</span>
              </div>
              <div id="popularExhibitionChart" class="chart"></div>
            </el-card>
          </el-col>
          <el-col :span="12">
            <el-card shadow="hover" class="chart-card">
              <div slot="header" class="clearfix">
                <span>热门解说员排行</span>
              </div>
              <div id="popularGuideChart" class="chart"></div>
            </el-card>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </template>
  
  <script>
  // 引入echarts
  import * as echarts from 'echarts'
  
  export default {
    name: 'DataAnalysis',
    data() {
      return {
        // 统计数据
        statistics: {
          userCount: 0,
          exhibitionCount: 0,
          reservationCount: 0,
          guideCount: 0
        },
        // 图表实例
        charts: {
          reservationTypeChart: null,
          reservationStatusChart: null,
          reservationTrendChart: null,
          popularExhibitionChart: null,
          popularGuideChart: null
        },
        // 加载状态
        loading: false
      }
    },
    mounted() {
      // 获取统计数据
      this.getStatistics()
      // 初始化图表
      this.initCharts()
      // 监听窗口大小变化，调整图表大小
      window.addEventListener('resize', this.resizeCharts)
    },
    beforeDestroy() {
      // 移除窗口大小变化监听
      window.removeEventListener('resize', this.resizeCharts)
      // 销毁图表实例
      Object.keys(this.charts).forEach(key => {
        if (this.charts[key]) {
          this.charts[key].dispose()
        }
      })
    },
    methods: {
      // 获取统计数据
      async getStatistics() {
        this.loading = true
        try {
          const { data: res } = await this.$http.get('/statistics/overview')
          if (res.code === 200) {
            this.statistics = res.data
            // 更新图表数据
            this.updateCharts()
          } else {
            this.$message.error(res.message || '获取统计数据失败')
          }
        } catch (error) {
          console.error('获取统计数据失败', error)
          this.$message.error('获取统计数据失败')
        } finally {
          this.loading = false
        }
      },
      // 初始化图表
      initCharts() {
        // 预约类型分布图表
        this.charts.reservationTypeChart = echarts.init(document.getElementById('reservationTypeChart'))
        // 预约状态分布图表
        this.charts.reservationStatusChart = echarts.init(document.getElementById('reservationStatusChart'))
        // 预约趋势图表
        this.charts.reservationTrendChart = echarts.init(document.getElementById('reservationTrendChart'))
        // 热门展览排行图表
        this.charts.popularExhibitionChart = echarts.init(document.getElementById('popularExhibitionChart'))
        // 热门解说员排行图表
        this.charts.popularGuideChart = echarts.init(document.getElementById('popularGuideChart'))
        
        // 设置图表加载动画
        Object.keys(this.charts).forEach(key => {
          this.charts[key].showLoading()
        })
      },
      // 更新图表数据
      async updateCharts() {
        try {
          // 获取预约类型分布数据
          const { data: typeRes } = await this.$http.get('/statistics/reservation/type')
          if (typeRes.code === 200) {
            this.updateReservationTypeChart(typeRes.data)
          }
          
          // 获取预约状态分布数据
          const { data: statusRes } = await this.$http.get('/statistics/reservation/status')
          if (statusRes.code === 200) {
            this.updateReservationStatusChart(statusRes.data)
          }
          
          // 获取预约趋势数据
          const { data: trendRes } = await this.$http.get('/statistics/reservation/trend')
          if (trendRes.code === 200) {
            this.updateReservationTrendChart(trendRes.data)
          }
          
          // 获取热门展览排行数据
          const { data: exhibitionRes } = await this.$http.get('/statistics/popular/exhibition')
          if (exhibitionRes.code === 200) {
            this.updatePopularExhibitionChart(exhibitionRes.data)
          }
          
          // 获取热门解说员排行数据
          const { data: guideRes } = await this.$http.get('/statistics/popular/guide')
          if (guideRes.code === 200) {
            this.updatePopularGuideChart(guideRes.data)
          }
        } catch (error) {
          console.error('获取图表数据失败', error)
          this.$message.error('获取图表数据失败')
        } finally {
          // 隐藏图表加载动画
          Object.keys(this.charts).forEach(key => {
            if (this.charts[key]) {
              this.charts[key].hideLoading()
            }
          })
        }
      },
      // 更新预约类型分布图表
      updateReservationTypeChart(data) {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: data.map(item => item.name)
          },
          series: [
            {
              name: '预约类型',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: data.map(item => ({
                value: item.value,
                name: item.name
              }))
            }
          ]
        }
        this.charts.reservationTypeChart.setOption(option)
      },
      // 更新预约状态分布图表
      updateReservationStatusChart(data) {
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: data.map(item => item.name)
          },
          series: [
            {
              name: '预约状态',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '18',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: data.map(item => ({
                value: item.value,
                name: item.name
              }))
            }
          ]
        }
        this.charts.reservationStatusChart.setOption(option)
      },
      // 更新预约趋势图表
      updateReservationTrendChart(data) {
        // console.log(data)
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          yAxis: {
            type: 'value'
          },
          xAxis: {
            type: 'category',
            data: data.map(item => item.name)  // Category data for yAxis
          },
          series: [
            {
              name: '预约次数',
              type: 'bar',
              data: data.map(item => item.value)  // Data for bar chart
            }
          ]
        }

        // console.log(option)
        // this.charts.reservationTrendChart = echarts.init(document.getElementById('reservationTrendChart'))
        this.charts.reservationTrendChart.setOption(option)
      },
      // 更新热门展览排行图表
      updatePopularExhibitionChart(data) {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: data.map(item => item.name)
          },
          series: [
            {
              name: '预约次数',
              type: 'bar',
              data: data.map(item => item.value)
            }
          ]
        }
        this.charts.popularExhibitionChart.setOption(option)
      },
      // 更新热门解说员排行图表
      updatePopularGuideChart(data) {
        const option = {
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'value'
          },
          yAxis: {
            type: 'category',
            data: data.map(item => item.name)
          },
          series: [
            {
              name: '预约次数',
              type: 'bar',
              data: data.map(item => item.value)
            }
          ]
        }
        this.charts.popularGuideChart.setOption(option)
      }
    }
  }
  </script>
  
  <style scoped>
  .data-analysis-container {
    padding: 20px;
  }
  
  .stat-cards {
    margin-bottom: 20px;
  }
  
  .stat-card {
    height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  
  .stat-card-header {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
  }
  
  .stat-icon {
    font-size: 24px;
    margin-right: 10px;
  }
  
  .user-icon {
    color: #409EFF;
  }
  
  .exhibition-icon {
    color: #67C23A;
  }
  
  .reservation-icon {
    color: #E6A23C;
  }
  
  .guide-icon {
    color: #F56C6C;
  }
  
  .stat-title {
    font-size: 16px;
    color: #606266;
  }
  
  .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: #303133;
  }
  
  .chart-row {
    margin-bottom: 20px;
  }
  
  .chart-card {
    height: 400px;
  }
  
  .chart {
    height: 320px;
  }
  </style>